<template>
  <view>
    <view class="goods-list">
      <view v-for="(goods, i) in originData.goodsList" :key="i" @click="gotoDetail(goods)">
        <!-- 为 my-goods 组件动态绑定 goods 属性的值 -->
		<my-goods :goods="goods"></my-goods>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
	import { ref, reactive } from 'vue'
	import {onLoad, onShow, onReachBottom, onPullDownRefresh } from "@dcloudio/uni-app"
	
	// 综合定义方案
	const originData = reactive({
		// 请求参数对象
		queryObj: {
			// 查询关键词
			query: '',
			// 商品分类Id
			cid: '',
			// 页码值
			pagenum: 1,
			// 每页显示多少条数据
			pagesize: 10
			},
		// 商品列表的数据
		goodsList: [],
		// 总数量，用来实现分页
		total: 0,
		// 是否正在请求数据
		isLoading: false
	})
	
	onLoad((option) => {
		// 将页面参数转存到 originData.queryObj 对象中
		originData.queryObj.query = option.query || ''
		originData.queryObj.cid = option.cid || ''
		getGoodsList()
	})
	
	// 获取楼层数据
	const getGoodsList = async (cb?)=> {
		
		// 打开节流阀
		originData.isLoading = true
		const {data: res} = await uni.$http.get(
		'https://api-hmugo-web.itheima.net/api/public/v1/goods/search'
		);
		// 关闭节流阀
		originData.isLoading = false
		// 只要数据请求完毕，就立即按需调用 cb 回调函数
		cb && cb()
		console.log(res);
		if(res.meta.status !== 200) return uni.$showMsg();
		
		// 为数据赋值：通过展开运算符的形式，进行新旧数据的拼接
		originData.goodsList = [...originData.goodsList, ...res.message.goods]
		
		originData.total = res.message.total;
	}
	
	// 触底的事件
	onReachBottom(()=> {
		// 判断是否还有下一下数据
		if(originData.queryObj.pagenum * originData.queryObj.pagesize >= originData.total) return uni.$showMsg('数据加载完毕！')
		
		// 如果正在请求数据，就直接return
		if(originData.isLoading) return
		// 让页码值自增 +1
		originData.queryObj.pagenum += 1
		// 重新获取列表数据
		getGoodsList()
	})
	
	onPullDownRefresh(() => {
		// 1. 重置关键数据
		  originData.queryObj.pagenum = 1
		  originData.total = 0
		  originData.isloading = false
		  originData.goodsList = []
		
		  // 2. 重新发起请求
		  getGoodsList(() => uni.stopPullDownRefresh())
	})
	
	const gotoDetail = (item) => {
		uni.navigateTo({
			url:'/subpkg/goods_detail/goods_detail?goods_id=' + item.goods_id
		})
	}
	
</script>

<style lang="scss">
	
</style>
